<template>
  <div id="jsmind_container"></div>
  <!--            <js-mind :values="mind1" :options="options1" ref="jsMind" height="500px"></js-mind>-->
</template>
<script>
import jsMind from 'jsmind';
import 'jsmind/draggable-node';
import 'jsmind/style/jsmind.css';

import { defineComponent, h, onMounted, reactive, ref, watch } from "vue";
import { post } from "@/api/http";
import { getGoalDuration, getFieldsMindMap, getTaskLogList, addTaskLog } from "@/api/url";
import { useMessage } from "naive-ui";
import useUserStore from "@/store/modules/user";
const message = useMessage()
const userStore = useUserStore()

export default defineComponent({
  name: 'FieldMindMap',
  components: {},
  setup() {
    const mind = {
      /* 元数据，定义思维导图的名称、作者、版本等信息 */
      meta: {
        name: "思维导图",
        author: "hizzgdev@163.com",
        version: "0.2",
      },
      /* 数据格式声明 */
      format: "node_tree",
      /* 数据内容 */
      data: {
        id: "root",
        topic: "jsMind",
        children: [
          {
            id: "easy", // [必选] ID, 所有节点的ID不应有重复，否则ID重复的结节将被忽略
            topic: "Easy", // [必选] 节点上显示的内容
            direction: "left", // [可选] 节点的方向，此数据仅在第一层节点上有效，目前仅支持 left 和 right 两种，默认为 right
            expanded: true, // [可选] 该节点是否是展开状态，默认为 true
            children: [
              { id: "easy1", topic: "Easy to show" },
              { id: "easy2", topic: "Easy to edit" },
              { id: "easy3", topic: "Easy to store" },
              { id: "easy4", topic: "Easy to embed" },
            ],
          },
          {
            id: "open",
            topic: "Open Source",
            direction: "left",
            expanded: true,
            children: [
              { id: "open1", topic: "on GitHub" },
              { id: "open2", topic: "BSD License" },
            ],
          },
          {
            id: "powerful",
            topic: "Powerful",
            direction: "right",
            children: [
              { id: "powerful1", topic: "Base on Javascript" },
              { id: "powerful2", topic: "Base on HTML5" },
              { id: "powerful3", topic: "Depends on you" },
            ],
          },
          {
            id: "other",
            topic: "test node",
            direction: "right",
            children: [
              { id: "other1", topic: "I'm from local variable" },
              { id: "other2", topic: "I can do everything" },
            ],
          },
        ],
      },
    };
    const options = {
      container: "jsmind_container", // [必选] 容器的ID
      editable: true, // [可选] 是否启用编辑
      mode: "full", // 布局模式
      theme: "primary", // [可选] 主题
      log_level: "info",
      view: {
        engine: "canvas", // 思维导图各节点之间线条的绘制引擎
        hmargin: 120, // 思维导图距容器外框的最小水平距离
        vmargin: 50, // 思维导图距容器外框的最小垂直距离
        line_width: 2, // 思维导图线条的粗细
        line_color: "#555", // 思维导图线条的颜色,
        line_style: "straight", // 思维导图线条的样式，直线(straight)或者曲线(curved)
        draggable: true,
      },
      layout: {
        hspace: 100, // 节点之间的水平间距
        vspace: 20, // 节点之间的垂直间距
        pspace: 20, // 节点与连接线之间的水平间距（用于容纳节点收缩/展开控制器）
      },
      shortcut: {
        enable: false, // 是否启用快捷键 默认为true
      },
    };
    // const mind1 = ref(mind);
    // const options1 = reactive(options);
    onMounted(async () => {
      const startOnField = ref([]);
      try {
        const data = await post({
          url: getFieldsMindMap,
          token: userStore.getToken()
        });
        console.log(data.data)
        // message.success(data.msg)
        mind.data = data.data.data;
        startOnField.value = data.data.startOnField;
      } catch (e) {
        message.error(e.message)
      } finally {
      }
      // 初始化
      const jm = new jsMind(options);
      jm.show(mind);
      jm.enable_edit();
      if (startOnField.value)
        for (const valueElement of startOnField.value) {
          jm.set_node_color(valueElement.toString(), "red", "white");
        }
      // for (const fieldTreeElement of fieldTree.fieldData) {
      //   if (FieldContentData.checkIsGoing(fieldTreeElement))
      //     jm.set_node_color(fieldTreeElement.id.toString(), "red", "white");
      // }
    });
    return {
    }
  },
})
</script>
<style lang="less">
#jsmind_container {
  width: 100%;
  height: 100vh;
}
</style>
